<template>
  <el-dialog title="文件查看" :visible.sync="visible" width="90%">
    <editor v-model="resourceDetailArea" lang="xml" theme="chrome" width="100%" height="400px" @init="editorInit" />
  </el-dialog>
</template>

<script>
import { getDetail } from '@/api/perf/resource.js'
export default {
  components: {
    editor: require('vue2-ace-editor')
  },
  data() {
    return {
      visible: false,
      id: '',
      resourceDetailArea: 'resourceDetailArea' // taexarea内容
    }
  },
  methods: {
    init(id) {
      this.visible = true
      this.id = id
      this.viewresourceDetail()
    },
    editorInit(ed) {
      require('brace/ext/language_tools') // language extension prerequsite...
      require('brace/mode/xml')
      require('brace/mode/javascript') // language
      require('brace/mode/less')
      require('brace/theme/chrome')
      require('brace/snippets/javascript') // snippet
      ed.setReadOnly(true)
    },
    // 查询脚本详情
    viewresourceDetail() {
      getDetail(this.id).then(respnose => {
        if (respnose && respnose.code === 200) {
          const { data } = respnose
          this.resourceDetailArea = data
        } else {
          this.$message.error(respnose.message)
          this.resourceDetailArea = '查询出现异常'
        }
      })
    }
  }
}
</script>

<style>
</style>
